---
title: Icons
description: Available icons for Unkey's apps.
---
import { RenderComponentWithSnippet } from "@/app/components/render";
import { Row } from "@/app/components/row";
import { Icon } from "@/app/components/icon-swatch";
import { Icon as XXX } from "@unkey/icons";
import { TypeTable } from "fumadocs-ui/components/type-table";
import { Step, Steps } from "fumadocs-ui/components/steps";
import {
  AdjustContrast3,
  ArrowDotAntiClockwise,
  ArrowDottedRotateAnticlockwise,
  ArrowOppositeDirectionY,
  ArrowRight,
  ArrowUpRight,
  ArrowsToAllDirections,
  ArrowsToCenter,
  Ban,
  BarsFilter,
  Bolt,
  Book2,
  BookOpen,
  BookBookmark,
  Bookmark,
  BracketsCurly,
  Bucket,
  Calendar,
  CalendarClock,
  CalendarEvent,
  CaretDown,
  CaretExpandY,
  CaretRight,
  CaretRightOutline,
  CaretUp,
  ChartActivity,
  ChartActivity2,
  ChartBarAxisY,
  ChartPie,
  ChartUsage,
  Chats,
  Check,
  ChevronDown,
  ChevronExpandY,
  ChevronLeft,
  ChevronRight,
  ChevronUp,
  Circle,
  CircleCaretDown,
  CircleCaretRight,
  CircleCheck,
  CircleDotted,
  CircleHalfDottedClock,
  CircleInfo,
  CircleInfoSparkle,
  CircleLock,
  CircleQuestion,
  CircleWarning,
  CircleXMark,
  Clipboard,
  ClipboardCheck,
  Clock,
  ClockRotateClockwise,
  Clone,
  Cloud,
  CloudUp,
  Code,
  CodeBranch,
  CodeCommit,
  Coins,
  Connections,
  Conversion,
  Cube,
  Dots,
  DoubleChevronLeft,
  DoubleChevronRight,
  Earth,
  Envelope,
  ExternalLink,
  Eye,
  EyeSlash,
  Fingerprint,
  Focus,
  FolderCloud,
  Gauge,
  Gear,
  Github,
  Grid,
  GridCircle,
  HalfDottedCirclePlay,
  Harddrive,
  Heart,
  InputPasswordEdit,
  InputPasswordSettings,
  InputSearch,
  Key,
  Key2,
  Laptop2,
  Layers2,
  Layers3,
  Link4,
  ListRadio,
  Location2,
  Lock,
  Magnifier,
  MathFunction,
  MessageWriting,
  Minus,
  MoonStars,
  Nodes,
  NumberInput,
  Nut,
  Page2,
  PaperClip2,
  PenWriting3,
  Plus,
  ProgressBar,
  Pulse,
  Refresh3,
  ShareUpRight,
  Shield,
  ShieldAlert,
  ShieldCheck,
  ShieldKey,
  SidebarLeftHide,
  SidebarLeftShow,
  Sliders,
  Sparkle3,
  StackPerspective2,
  Storage,
  Sun,
  Tag,
  TaskChecked,
  TaskUnchecked,
  TextInput,
  TimeClock,
  Trash,
  TriangleWarning,
  TriangleWarning2,
  Ufo,
  Unlink,
  User,
  UserPlus,
  UserSearch,
  XMark,
} from "@unkey/icons";

<TypeTable
  type={{
    className: {
      description:
        "A className applied to the icon to override the styling in edge cases. In most cases you should not change the size of the icon.",
      type: "string | undefined",
      default: undefined,
    },
  }}
/>

## Customize
As a rule of thumb, you should only customize the color, but there's always an edge case.

<RenderComponentWithSnippet
  customCodeSnippet={`<Row>
    <Nodes className="text-error-9"/>
    <Sparkle3 className="text-warning-9 size-16"/>
    <TaskUnchecked className="size-[12px]"/>
</Row>`}
>
  <Row>
    <Nodes className="text-error-9" />
    <Sparkle3 className="text-warning-9 size-16" />
    <TaskUnchecked className="size-[12px]" />
  </Row>
</RenderComponentWithSnippet>

## Icons
These are all the icons available to import.
```tsx
import { IconName } from "@unkey/icons";
```

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
  <Icon name="AdjustContrast3">
    <AdjustContrast3 />
  </Icon>
  <Icon name="ArrowDotAntiClockwise">
    <ArrowDotAntiClockwise />
  </Icon>
  <Icon name="ArrowDottedRotateAnticlockwise">
    <ArrowDottedRotateAnticlockwise />
  </Icon>
  <Icon name="ArrowOppositeDirectionY">
    <ArrowOppositeDirectionY />
  </Icon>
  <Icon name="ArrowRight">
    <ArrowRight />
  </Icon>
  <Icon name="ArrowUpRight">
    <ArrowUpRight />
  </Icon>
  <Icon name="ArrowsToAllDirections">
    <ArrowsToAllDirections />
  </Icon>
  <Icon name="ArrowsToCenter">
    <ArrowsToCenter />
  </Icon>
  <Icon name="Ban">
    <Ban />
  </Icon>
  <Icon name="BarsFilter">
    <BarsFilter />
  </Icon>
  <Icon name="Bolt">
    <Bolt />
  </Icon>
  <Icon name="Book2">
    <Book2 />
  </Icon>
  <Icon name="BookOpen">
    <BookOpen />
  </Icon>
  <Icon name="BookBookmark">
    <BookBookmark />
  </Icon>
  <Icon name="Bookmark">
    <Bookmark />
  </Icon>
  <Icon name="BracketsCurly">
    <BracketsCurly />
  </Icon>
  <Icon name="Bucket">
    <Bucket />
  </Icon>
  <Icon name="Calendar">
    <Calendar />
  </Icon>
  <Icon name="CalendarClock">
    <CalendarClock />
  </Icon>
  <Icon name="CalendarEvent">
    <CalendarEvent />
  </Icon>
  <Icon name="CaretDown">
    <CaretDown />
  </Icon>
  <Icon name="CaretExpandY">
    <CaretExpandY />
  </Icon>
  <Icon name="CaretRight">
    <CaretRight />
  </Icon>
  <Icon name="CaretRightOutline">
    <CaretRightOutline />
  </Icon>
  <Icon name="CaretUp">
    <CaretUp />
  </Icon>
  <Icon name="ChartActivity">
    <ChartActivity />
  </Icon>
  <Icon name="ChartActivity2">
    <ChartActivity2 />
  </Icon>
  <Icon name="ChartBarAxisY">
    <ChartBarAxisY />
  </Icon>
  <Icon name="ChartPie">
    <ChartPie />
  </Icon>
  <Icon name="ChartUsage">
    <ChartUsage />
  </Icon>
  <Icon name="Chats">
    <Chats />
  </Icon>
  <Icon name="Check">
    <Check />
  </Icon>
  <Icon name="ChevronDown">
    <ChevronDown />
  </Icon>
  <Icon name="ChevronExpandY">
    <ChevronExpandY />
  </Icon>
  <Icon name="ChevronLeft">
    <ChevronLeft />
  </Icon>
  <Icon name="ChevronRight">
    <ChevronRight />
  </Icon>
  <Icon name="ChevronUp">
    <ChevronUp />
  </Icon>
  <Icon name="Circle">
    <Circle />
  </Icon>
  <Icon name="CircleCaretDown">
    <CircleCaretDown />
  </Icon>
  <Icon name="CircleCaretRight">
    <CircleCaretRight />
  </Icon>
  <Icon name="CircleCheck">
    <CircleCheck />
  </Icon>
  <Icon name="CircleDotted">
    <CircleDotted />
  </Icon>
  <Icon name="CircleHalfDottedClock">
    <CircleHalfDottedClock />
  </Icon>
  <Icon name="CircleInfo">
    <CircleInfo />
  </Icon>
  <Icon name="CircleInfoSparkle">
    <CircleInfoSparkle />
  </Icon>
  <Icon name="CircleLock">
    <CircleLock />
  </Icon>
  <Icon name="CircleQuestion">
    <CircleQuestion />
  </Icon>
  <Icon name="CircleWarning">
    <CircleWarning />
  </Icon>
  <Icon name="CircleXMark">
    <CircleXMark />
  </Icon>
  <Icon name="Clipboard">
    <Clipboard />
  </Icon>
  <Icon name="ClipboardCheck">
    <ClipboardCheck />
  </Icon>
  <Icon name="Clock">
    <Clock />
  </Icon>
  <Icon name="ClockRotateClockwise">
    <ClockRotateClockwise />
  </Icon>
  <Icon name="Clone">
    <Clone />
  </Icon>
  <Icon name="Cloud">
    <Cloud />
  </Icon>
  <Icon name="CloudUp">
    <CloudUp />
  </Icon>
  <Icon name="Code">
    <Code />
  </Icon>
  <Icon name="CodeBranch">
    <CodeBranch />
  </Icon>
  <Icon name="CodeCommit">
    <CodeCommit />
  </Icon>
  <Icon name="Coins">
    <Coins />
  </Icon>
  <Icon name="Connections">
    <Connections />
  </Icon>
  <Icon name="Conversion">
    <Conversion />
  </Icon>
  <Icon name="Cube">
    <Cube />
  </Icon>
  <Icon name="Dots">
    <Dots />
  </Icon>
  <Icon name="DoubleChevronLeft">
    <DoubleChevronLeft />
  </Icon>
  <Icon name="DoubleChevronRight">
    <DoubleChevronRight />
  </Icon>
  <Icon name="Earth">
    <Earth />
  </Icon>
  <Icon name="Envelope">
    <Envelope />
  </Icon>
  <Icon name="ExternalLink">
    <ExternalLink />
  </Icon>
  <Icon name="Eye">
    <Eye />
  </Icon>
  <Icon name="EyeSlash">
    <EyeSlash />
  </Icon>
  <Icon name="Fingerprint">
    <Fingerprint />
  </Icon>
  <Icon name="Focus">
    <Focus />
  </Icon>
  <Icon name="FolderCloud">
    <FolderCloud />
  </Icon>
  <Icon name="Gauge">
    <Gauge />
  </Icon>
  <Icon name="Gear">
    <Gear />
  </Icon>
  <Icon name="Github">
    <Github />
  </Icon>
  <Icon name="Grid">
    <Grid />
  </Icon>
  <Icon name="GridCircle">
    <GridCircle />
  </Icon>
  <Icon name="HalfDottedCirclePlay">
    <HalfDottedCirclePlay />
  </Icon>
  <Icon name="Harddrive">
    <Harddrive />
  </Icon>
  <Icon name="Heart">
    <Heart />
  </Icon>
  <Icon name="InputPasswordEdit">
    <InputPasswordEdit />
  </Icon>
  <Icon name="InputPasswordSettings">
    <InputPasswordSettings />
  </Icon>
  <Icon name="InputSearch">
    <InputSearch />
  </Icon>
  <Icon name="Key">
    <Key />
  </Icon>
  <Icon name="Key2">
    <Key2 />
  </Icon>
  <Icon name="Laptop2">
    <Laptop2 />
  </Icon>
  <Icon name="Layers2">
    <Layers2 />
  </Icon>
  <Icon name="Layers3">
    <Layers3 />
  </Icon>
  <Icon name="Link4">
    <Link4 />
  </Icon>
  <Icon name="ListRadio">
    <ListRadio />
  </Icon>
  <Icon name="Location2">
    <Location2 />
  </Icon>
  <Icon name="Lock">
    <Lock />
  </Icon>
  <Icon name="Magnifier">
    <Magnifier />
  </Icon>
  <Icon name="MathFunction">
    <MathFunction />
  </Icon>
  <Icon name="MessageWriting">
    <MessageWriting />
  </Icon>
  <Icon name="Minus">
    <Minus />
  </Icon>
  <Icon name="MoonStars">
    <MoonStars />
  </Icon>
  <Icon name="Nodes">
    <Nodes />
  </Icon>
  <Icon name="NumberInput">
    <NumberInput />
  </Icon>
  <Icon name="Nut">
    <Nut />
  </Icon>
  <Icon name="Page2">
    <Page2 />
  </Icon>
  <Icon name="PaperClip2">
    <PaperClip2 />
  </Icon>
  <Icon name="PenWriting3">
    <PenWriting3 />
  </Icon>
  <Icon name="Plus">
    <Plus />
  </Icon>
  <Icon name="ProgressBar">
    <ProgressBar />
  </Icon>
  <Icon name="Pulse">
    <Pulse />
  </Icon>
  <Icon name="Refresh3">
    <Refresh3 />
  </Icon>
  <Icon name="ShareUpRight">
    <ShareUpRight />
  </Icon>
  <Icon name="Shield">
    <Shield />
  </Icon>
  <Icon name="ShieldAlert">
    <ShieldAlert />
  </Icon>
  <Icon name="ShieldCheck">
    <ShieldCheck />
  </Icon>
  <Icon name="ShieldKey">
    <ShieldKey />
  </Icon>
  <Icon name="SidebarLeftHide">
    <SidebarLeftHide />
  </Icon>
  <Icon name="SidebarLeftShow">
    <SidebarLeftShow />
  </Icon>
  <Icon name="Sliders">
    <Sliders />
  </Icon>
  <Icon name="Sparkle3">
    <Sparkle3 />
  </Icon>
  <Icon name="StackPerspective2">
    <StackPerspective2 />
  </Icon>
  <Icon name="Storage">
    <Storage />
  </Icon>
  <Icon name="Sun">
    <Sun />
  </Icon>
  <Icon name="Tag">
    <Tag />
  </Icon>
  <Icon name="TaskChecked">
    <TaskChecked />
  </Icon>
  <Icon name="TaskUnchecked">
    <TaskUnchecked />
  </Icon>
  <Icon name="TextInput">
    <TextInput />
  </Icon>
  <Icon name="TimeClock">
    <TimeClock />
  </Icon>
  <Icon name="Trash">
    <Trash />
  </Icon>
  <Icon name="TriangleWarning">
    <TriangleWarning />
  </Icon>
  <Icon name="TriangleWarning2">
    <TriangleWarning2 />
  </Icon>
  <Icon name="Ufo">
    <Ufo />
  </Icon>
  <Icon name="Unlink">
    <Unlink />
  </Icon>
  <Icon name="User">
    <User />
  </Icon>
  <Icon name="UserPlus">
    <UserPlus />
  </Icon>
  <Icon name="UserSearch">
    <UserSearch />
  </Icon>
  <Icon name="XMark">
    <XMark />
  </Icon>
</div>

## Adding new icons
Importing icons is a manual process.
<Steps>
<Step>
  Open the icon in the `Nucleo UI Essential` collection and select the icon(s)
  you want to export.
</Step>
<Step>
  Export it as `jsx`, and remove the title. ![Nucleo Export
  Settings](./icons-export-settings.png)
</Step>
<Step>
  Update the code to match our guidelines.
<Steps>
  <Step>
    Rename the file to `.tsx`
  </Step>
  <Step>
    Add the following license block at the start of the file:
    ```tsx
    /**
    * Copyright © Nucleo
    * Version 1.3, January 3, 2024
    * Nucleo Icons
    * https://nucleoapp.com/
    * - Redistribution of icons is prohibited.
    * - Icons are restricted for use only within the product they are bundled with.
    *
    * For more details:
    * https://nucleoapp.com/license
    */
    ```
  </Step>
  <Step>
    Replace the function syntax with: `export const INSERT_ICON_NAME: React.FC<IconProps> = (props) => {`
  </Step>
  <Step>
    Remove the default export
  </Step>
  <Step>
    Update all color references to `currentColor`
  </Step>
  <Step>
    Add `{...props}` to the root `svg` element.
  </Step>
  <Step>
    Export it in the `/internal/icons/src/index.ts` barrel file.
  </Step>
  <Step>
    Import and add it in in this file under [#icons](/design/icons#icons) in alphabetic order.
  </Step>
</Steps>
</Step>
</Steps>
